<template>
  <div o-Container>
    <o-list v-bind:source="list.apiSource" v-bind="{created:create,modified:modify,exported:output}"/>

    <o-dialog v-bind:source="panel.source" v-bind="{opened:loadPanel,closed:loadPanel}">
      <template slot="content">
        <o-item v-bind:source="item.apiSource"
                v-bind="{loaded:load,saved:save,backed:back}"></o-item>
        =================================================== 请求参数 ===================================================
        <o-list v-bind:source="list.apiRequestSource"
                v-bind="{created:createRequestSource,modified:modifyModelSource}"/>
        =================================================== 响应参数 ===================================================
        <o-list v-bind:source="list.apiResponseSource"
                v-bind="{created:createResponseSource,modified:modifyModelSource}"/>
      </template>
    </o-dialog>

    <o-dialog v-bind:source="panel.modelSource" v-bind="{opened:loadPanel,closed:loadPanel}">
      <template slot="content">
        <o-item v-bind:source="item.apiModelSource"
                v-bind="{loaded:loadModelSource,saved:saveModelSource,backed:backModelSource}"></o-item>
      </template>
    </o-dialog>
  </div>
</template>

<script>
  export default {
    name: "mms_engine_mqtt_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        //列表 数据
        list: {
          apiSource: {
            data: {
              id: 1037,
              cellData: [
                {name: "ServerID", width: 160, searchKey: "=", link: [{mapping: "TypeID", value: 7}]},	// 所属接口
                {name: "Name", width: 200, searchKey: "LIKE"},	// 接口名
                {name: "MethodName", width: 200, searchKey: "LIKE"},	// 接口名
                {name: "RequestTypeID", width: 90, searchKey: "="},	// 请求类型
                {name: "ResponseTypeID", width: 90, searchKey: "="},	// 响应类型
                {name: "TargetTableID", width: 200, searchKey: "="},	// 接口名
                {name: "Note", width: 200, searchKey: "LIKE"},	// 接口名
                {name: "CreateDate", width: 160},	// 创建日期
              ],
            },
          },
          apiRequestSource: {
            data: {
              id: 1039,
              cellData: [
                {name: "ModelID", show: false, filterKey: "=", filterValue: 1},	// 请求模式
                {name: "ApiID", filterKey: "="},	// 所属API
                {name: "Extract", width: 300},	// 表达式
                {name: "TypeID"},	// 字段类型
                {name: "IsNull"},	// 允许为空
                {name: "Length"},	// 数据长度
                {name: "TargetColumnID", width: 270},	// 目标字段
                {name: "Note", width: 270},	// 字段描述
                {name: "CreateDate", width: 160},	// 创建日期
              ],
              height: "200px",
            },
          },
          apiResponseSource: {
            data: {
              id: 1039,
              cellData: [
                {name: "ModelID", show: false, filterKey: "=", filterValue: 2},	// 响应模式
                {name: "ApiID", filterKey: "="},	// 所属API
                {name: "Extract", width: 300},	// 表达式
                {name: "TypeID"},	// 字段类型
                {name: "IsNull"},	// 允许为空
                {name: "Length"},	// 数据长度
                {name: "TargetColumnID", width: 270},	// 目标字段
                {name: "Note", width: 270},	// 字段描述
                {name: "CreateDate", width: 160},	// 创建日期
              ],
              height: "200px",
            },
          },
        },
        // 创建页面和修改页面的需要的数据
        item: {
          apiSource: {
            data: {
              id: 1037,
              value: "",
              cellData: [
                {name: "ServerID", link: [{mapping: "TypeID", value: 7}]},	// 所属接口
                {name: "Name"},	// 接口名
                {name: "MethodName"},	// 接口名
                {name: "RequestTypeID"},	// 请求类型
                {name: "ResponseTypeID"},	// 响应类型
                {name: "TargetTableID"},	// 数据长度
                {name: "CreateDate"},	// 创建日期
                {name: "Note"},	// 接口名
              ],
            }
          },
          apiModelSource: {
            data: {
              id: 1039,
              cellData: [
                {name: "ModelID"},	// 模式类型
                {name: "ApiID"},	// 所属API
                // {name: "ParentID"},	// 表达式
                {name: "Extract"},	// 表达式
                {name: "TypeID"},	// 字段类型
                {name: "IsNull"},	// 允许为空
                {name: "Length"},	// 数据长度
                {name: "TargetColumnID"},	// 目标字段
                {name: "CreateDate"},	// 创建日期
                {name: "Note"},	// 字段描述
              ],
            },
          },
        },
        panel: {
          source: {
            visible: false
          },
          modelSource: {
            visible: false
          }
        },
        mqttID: null,
      }
    },
    created: function () {
      this.init();
    },
    methods: {
      // 适配 平台 和 用户
      init: function () {

      },
      load: function (data) {
        // // alert(JSON.stringify(data));
        // // 得到TableID对象
        // let ListFilterData = $.grep(this.list.apiSourceKey.data.cellData, function (value) {
        //   return value.name == "MqttID";//筛选出消息源ID编号
        // })[0];
        // // 如果Menu有主键值，说明是更新动作，否则创建动作，没有的加了也白加。
        // if (this.item.apiSource.data.value) {
        //   // 定义TableID具体内容
        //   ListFilterData.filterValue = this.item.apiSource.data.value;
        // } else {
        //   // 新创建页面时默认-1，查不到，最牛逼。
        //   ListFilterData.filterValue = -1;
        // }
        // this.list.apiSourceKey.control.load();

        // 更新最新更新人
        // this.octopus.tools.parseCell(this.item.datasource.data, "UpdateDate").defaultValue =  this.octopus.tools.date("yyyy-MM-dd HH:mm:ss");
        // this.octopus.tools.parseCell(this.item.datasource.data, "UpdaterID").defaultValue =  this.octopus.passport.id.toString();
      },
      // validate: function (status) {
      //   let pathData = this.octopus.tools.parseCell(this.item.apiSource.data, "Path").defaultValue;
      //   if (pathData.indexOf("#{sensor}") == -1) {
      //     this.octopus.tips.error("路径必须带#{sensor}表达式，否则引擎无法解析。");
      //     // 将表达式设置为false
      //     status = false;
      //   }
      //
      //   return status;
      // },
      loadPanel: function (data) {
        //
      },
      create: function () {
        this.item.apiSource.data.value = null;
        this.item.apiSource.control.load();
        this.panel.source.visible = true;
      },
      modify: function (row) {
        this.mqttID = row.ID;
        this.item.apiSource.data.value = row.ID;
        this.item.apiSource.control.load();

        this.octopus.tools.parseCell(this.list.apiRequestSource.data, "ApiID").filterValue = row.ID;
        this.list.apiRequestSource.control.load();

        this.octopus.tools.parseCell(this.list.apiResponseSource.data, "ApiID").filterValue = row.ID;
        this.list.apiResponseSource.control.load();

        this.panel.source.visible = true;
      },
      save: function (data) {
        this.octopus.tips.success(data);
        // 刷新list
        this.list.apiSource.control.load();
        this.back();
      },
      back: function () {
        this.panel.source.visible = false;
      },
      validateKey: function (status) {
        // let expressionData = this.octopus.tools.parseCell(this.item.apiSourceKey.data, "Expression").defaultValue;
        // if (!this.octopus.tools.IsNullOrEmpty(expressionData) && expressionData.indexOf("#{value}") == -1) {
        //   this.octopus.tips.error("表达式不为空时，必须包含#{value}表达式，否则解析引擎将无法正常工作。");
        //   // 将表达式设置为false
        //   status = false;
        // }
        return status;
      },
      createRequestSource: function () {
        this.item.apiModelSource.data.value = null;
        this.item.apiModelSource.control.load();
        // 定义为请求模式
        this.octopus.tools.parseCell(this.item.apiModelSource.data, "ModelID").defaultValue = "1";
        this.panel.modelSource.visible = true;
      },
      createResponseSource: function () {
        this.item.apiModelSource.data.value = null;
        this.item.apiModelSource.control.load();
        // 定义为响应模式
        this.octopus.tools.parseCell(this.item.apiModelSource.data, "ModelID").defaultValue = "2";
        this.panel.modelSource.visible = true;
      },
      modifyModelSource: function (row) {
        this.item.apiModelSource.data.value = row.ID;
        this.item.apiModelSource.control.load();
        this.panel.modelSource.visible = true;
      },
      // 加载模式Key时触发。
      loadModelSource: function () {
        let targetTableID = this.octopus.tools.parseCell(this.item.apiSource.data, "TargetTableID").defaultValue;
        targetTableID = targetTableID != "" ? targetTableID : 0;
        this.octopus.tools.parseCell(this.item.apiModelSource.data, "TargetColumnID").link = [{
          mapping: "TableID",
          value: targetTableID
        }];

        // 所属 API
        let apiID = this.item.apiSource.data.value;

        // 模式
        let modelID =  this.octopus.tools.parseCell(this.item.apiModelSource.data, "ModelID").defaultValue;

        // alert(modelID);
        // 如果为空，则说明是创建。
        if (this.octopus.tools.IsNullOrEmpty(this.item.apiModelSource.data.value)) {
          // 避开最开始的首次进入apiID为空
          if (apiID) {
            this.octopus.tools.parseCell(this.item.apiModelSource.data, "ApiID").defaultValue = apiID.toString();
          }
        }
        // 如果是编辑
        else {

        }

        // 设置父级菜单
        // this.octopus.tools.parseCell(this.item.apiModelSource.data, "ParentID").link = [
        //   {mapping: "ApiID", value: apiID}, {mapping: "ModelID", value: modelID}];

      },
      saveModelSource: function () {
        this.list.apiRequestSource.control.load();
        this.list.apiResponseSource.control.load();
        this.backModelSource();
      },

      backModelSource: function () {
        this.panel.modelSource.visible = false;
      },
    },
    props: ["oData"]
  }
</script>
